<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center personalInformation_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub personalInformation_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  personalInformation_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">&#xE794;</text>
				</view>
				<text class='personalInformation_fd0_0_c1'>增值服务</text>
				<view class='flex flex-wrap align-center personalInformation_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="search_view">
			<view class="tabs flex align-center">
				<view class="tabs_item" :class="tabs_id == 1 ? 'active_item' : ''" @tap.stop="selectTabs(1)">
					<view>保险</view>
					<view v-if="tabs_id == 1" class="tabs_icon"></view>
				</view>
				<view class="tabs_item" :class="tabs_id == 2 ? 'active_item' : ''" @tap.stop="selectTabs(2)">
					<view>其他</view>
					<view v-if="tabs_id == 2" class="tabs_icon"></view>
				</view>
			</view>
		</view>
		<view class="insurance_list">
			<view class="insurance_info">
				<view class="insurance_item flex align-center justify-between">
					<view class="service_name">服务名称</view>
					<u-switch v-model="checked" active-color="#1A66FA" size="28"></u-switch>
				</view>
				<view class="insurance_item no_line flex align-center justify-between">
					<view class="service_price">￥120/天</view>
					<view class="edit_text">修改</view>
				</view>
			</view>
		</view>
		
		<view class="bottom_info flex align-center justify-between">
			<view class="bottom_info_le flex align-center justify-center" @tap.stop="customShow=true">自定义服务项</view>
			<view class="bottom_info_ri flex align-center justify-center" @tap.stop="establishShow=true">
				<image :src='STATIC_URL+"489.png"' mode=""></image>
				<text>创建保险服务</text>
			</view>
		</view>
		
		
		<u-popup v-model="customShow" mode="bottom" border-radius="28">
			<view class="screen_popup">
				<view class="screen_title flex align-center justify-between">
					<view class="">自定义服务项</view>
					<u-icon name="close" color="#cccccc" size="30" @click="customShow=false"></u-icon>
				</view>
				<scroll-view class="service_list" scroll-y="true">
					<view class="service_item flex align-center justify-between">
						<view class="service_item_le">123456</view>
						<image class="service_item_ri" :src='STATIC_URL+"490.png"' mode=""></image>
					</view>
				</scroll-view>
				<view class="picker_btn flex align-center justify-between">
					<view class="picker_btn_1 flex align-center justify-center" @tap.stop="customShow=false">取消</view>
					<view class="picker_btn_2 flex align-center justify-center" @tap.stop="addShow=true">新增项目</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="addShow" mode="center" border-radius="32">
			<view class="deductible_popup">
				<view class="pop_title">新增自定义项</view>
				<view class="input_view flex align-center" style="margin-top: 14rpx;">
					<input class="input" maxlength="5" placeholder="输入自定义项，5个字符" placeholder-style="font-size:32rpx;color:#999;">
				</view>
				<view class="operation flex align-center justify-between" style="margin: 94rpx 0 54rpx;">
					<view class="operation_1 flex align-center justify-center" @tap.stop="addShow=false">取消</view>
					<view class="operation_2 flex align-center justify-center">确定</view>
				</view>
				<!-- <view class="pop_bg"></view> -->
			</view>
		</u-popup>
		
		<u-popup v-model="establishShow" mode="bottom" border-radius="28">
			<view class="screen_popup">
				<view class="screen_title flex align-center justify-between">
					<view class="">创建保险服务</view>
					<u-icon name="close" color="#cccccc" size="30" @click="establishShow=false"></u-icon>
				</view>
				<view class="service_content">
					<view class="service_view flex align-center justify-between">
						<view class="service_view_le">服务名称</view>
						<view class="service_view_ri">
							<input class="service_view_ri_in" placeholder="请输入服务名称" placeholder-style="font-size: 30rpx;color: #999;" type="text">
						</view>
					</view>
					<view class="service_view flex align-center justify-between">
						<view class="service_view_le">服务费用</view>
						<view class="service_view_ri flex align-center">
							<text>￥</text>
							<input class="service_view_ri_in" placeholder="请输入服务费用" placeholder-style="font-size: 30rpx;color: #999;" type="text">
						</view>
					</view>
					<view class="service_view flex align-center justify-between">
						<view class="service_view_le">计费方式</view>
						<view class="service_view_ri flex align-center">
							<view class="service_view_ri_text active_text flex align-center justify-center">次</view>
							<view class="service_view_ri_text flex align-center justify-center">天</view>
						</view>
					</view>
					<view class="tip_title">服务说明</view>
					<textarea class="tip_content" placeholder="请输入服务描述" placeholder-style="font-size: 28rpx;color: #999;" name="" id="" cols="30" rows="10"></textarea>
				</view>
				<view class="picker_btn flex align-center justify-between">
					<view class="picker_btn_1 flex align-center justify-center" @tap.stop="establishShow=false">取消</view>
					<view class="picker_btn_2 flex align-center justify-center">确认</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	export default {
		components: {},

		data() {
			return {
				"loadingImg": "",
				"errorImg": "",
				"imageUrl": "https://speed.zhongchuxing.com/gjdimages/476.png",
				"tabs_id": 1,
				"date": "",
				"checked": false,
				"customShow": false,
				"addShow": false,
				"establishShow": false,
			};
		},
		computed: {
			
		},
		watch: {},
		onLoad(options) {
	
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			selectTabs(id) {
				this.tabs_id = id;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.search_view {
		padding: 16rpx 24rpx 30rpx;
		.tabs {
			.tabs_item {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				position: relative;
				margin-right: 66rpx;
			}
			.active_item {
				font-weight: bold;
				font-size: 38rpx;
				color: #222222;
			}
			.tabs_icon {
				width: 40rpx;
				height: 4rpx;
				background: #1A66FA;
				border-radius: 2rpx;
				position: absolute;
				bottom: -8rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	.insurance_list {
		padding: 0 24rpx;
		.insurance_info {
			margin-top: 24rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 0 24rpx;
			.insurance_item {
				padding: 30rpx 0;
				border-bottom: 1px solid #eee;
				.service_name {
					font-weight: bold;
					font-size: 30rpx;
					color: rgba(0,0,0,0.8);
				}
				.service_price {
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}
				.edit_text {
					font-weight: 500;
					font-size: 28rpx;
					color: #1A66FA;
				}
			}		
		}
	}
	.no_line {
		border-bottom: 0;
	}
	.bottom_info {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 12rpx 28rpx 28rpx;
		background: #fff;
		z-index: 10;
		.bottom_info_le {
			width: 236rpx;
			height: 96rpx;
			background: #F6F7FB;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
		}
		.bottom_info_ri {
			width: 436rpx;
			height: 96rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 4rpx;
			}
		}
	}
	
	
	.screen_popup {
		.screen_title {
			padding: 30rpx 30rpx 30rpx 30rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
			border-bottom: 1px solid #eee;
		}
		.second_title {
			padding: 0 30rpx;
			margin: 32rpx 0 24rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}
		.service_list {
			padding: 0 30rpx;
			height: 500rpx;
			.service_item {
				padding: 30rpx 0;
				border-bottom: 1px solid #eee;
				.service_item_le {
					font-weight: 400;
					font-size: 30rpx;
					color: #222222;
				}
				.service_item_ri {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.service_content {
			padding: 0 30rpx;
			.service_view {
				padding: 30rpx 0;
				border-bottom: 1px solid #eee;
				.service_view_le {
					font-weight: 400;
					font-size: 30rpx;
					color: #222222;
				}
				.service_view_ri {
					// flex: 1;
					.service_view_ri_in {
						width: 240rpx;
						text-align: right;
						font-weight: 400;
						font-size: 30rpx;
					}
					.service_view_ri_text {
						width: 120rpx;
						height: 48rpx;
						background: #F6F7FB;
						border-radius: 40rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #222222;
						margin-left: 12rpx;
					}
					.active_text {
						background: #1A66FA;
						color: #fff;
					}
				}
			}
			.tip_title {
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;
				padding: 30rpx 0 26rpx;
			}
			.tip_content {
				width: 100%;
				height: 258rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				padding: 28rpx 42rpx;
				margin-bottom: 32rpx;
			}
		}
		.picker_btn {
			background: #fff;
			padding: 12rpx 30rpx 28rpx;
			margin-top: 12rpx;
			border-top: 1px solid #eee;
		}
		.picker_btn_1 {
			width: 236rpx;
			height: 96rpx;
			background: #F6F7FB;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
		}
		.picker_btn_2 {
			width: 436rpx;
			height: 96rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #fff;
		}
		.feedback_fd2_1 {
			background: #f6f7fb;
			border-radius: 8rpx;
			margin: 30rpx 30rpx 0;
			font-size: 26rpx;
			position: relative;
		}
		.feedback_input_fd2_1 {
			padding: 32rpx 34rpx 60rpx 34rpx;
			width: 100%;
			height: 290rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #222;
		}
		.feedback_num {
			font-weight: 500;
			font-size: 26rpx;
			color: rgba(23,19,19,0.4);
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}
	}
	
	.deductible_popup {
		width: 626rpx;
		position: relative;
		.pop_title {
			text-align: center;
			font-weight: 800;
			font-size: 36rpx;
			color: #222222;
			padding: 40rpx 0 12rpx;
		}
		.pop_tips {
			padding: 0 38rpx;
			margin-top: 16rpx;
			.tips_le {
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background: #1A66FA;
				margin-right: 16rpx;
				transform: translateY(16rpx);
			}
			.tips_ri {
				width: calc(100% - 24rpx);
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				line-height: 36rpx;
			}
		}
		.pop_btn {
			width: 548rpx;
			height: 88rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 66rpx auto 52rpx;
		}
		.pop_bg {
			width: 100%;
			height: 220rpx;
			background: linear-gradient( 180deg, rgba(26,102,250,0.2) 0%, rgba(255,255,255,0) 100%);
			border-radius: 32rpx 32rpx 0px 0px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.title_text {
			padding: 36rpx 40rpx 22rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
		}
		.input_view {
			width: 548rpx;
			height: 88rpx;
			border-radius: 16rpx;
			background: #F6F7FB;
			padding: 24rpx 0rpx;
			margin: 0 40rpx;
			.input {
				padding: 0 34rpx;
			}
		}
		.operation {
			margin: 46rpx 0;
			padding: 0 40rpx;
			.operation_1 {
				width: 266rpx;
				height: 88rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
			}
			.operation_2 {
				width: 266rpx;
				height: 88rpx;
				background: #1A66FA;
				border-radius: 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #fff;
			}
		}
		
		.charge_list {
			overflow: hidden;
			padding: 10rpx 40rpx 0;
			.charge_item {
				float: left;
				width: 174rpx;
				height: 80rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 10rpx;
				margin-right: 10rpx;
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 4rpx;
				}
			}
			.active_item {
				color: #1A66FA;
				background: #F1F6FF;
				border: 2rpx solid #AAC7FF;
			}
			.charge_item:nth-child(3n+3) {
				margin-right: 0;
			}
		}
	}
	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 40rpx 30rpx 30rpx 30rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	
	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}
	
	.personalInformation_picker2_0_c1 {
		font-weight: bold;
		font-size: 34rpx;
		color: #000000;
	}
	.bill_picker_btn {
		background: #fff;
		padding: 12rpx 30rpx 28rpx;
	}
	.bill_picker_btn_1 {
		width: 236rpx;
		height: 96rpx;
		background: #F6F7FB;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
	}
	.bill_picker_btn_2 {
		width: 436rpx;
		height: 96rpx;
		background: #1A66FA;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
	}

	.personalInformation_fd1_0 {
		// margin-top: 32rpx;
		height: 96rpx;
		border-top: 1px solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0,0,0,0.6);
	}

	.personalInformation_fd1_0_c1_image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.personalInformation_fd1_1 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_1_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_1_c1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_2 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_2_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_2_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_3 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_3_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_3_c1 {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(0,0,0,0.8);
	}

	.personalInformation_flex_1 {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		margin: 16rpx 24rpx 0;
	}

	.personalInformation_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.personalInformation_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.personalInformation_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.personalInformation_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.personalInformation_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: url(https://speed.zhongchuxing.com/gjdimages/page_bg.png) no-repeat;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: url(https://speed.zhongchuxing.com/gjdimages/page_bg.png) no-repeat #F6F7FB;
		background-size: 100% auto !important;
	}
</style>